<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>URL检测</title>
		<link rel="stylesheet" href="../../assets/libs/layui/css/layui.css" />
		<link rel="stylesheet" href="../../assets/module/admin.css?v=315" />
		<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
		<style>
			.layui-form-item {
				margin-bottom: 25px;
			}
			
			label .layui-icon {
				font-size: 14px;
				color: #666;
			}
		</style>
	</head>

	<body>

		<!-- 加载动画 -->
		<div class="page-loading">
			<div class="ball-loader">
				<span></span><span></span><span></span><span></span>
			</div>
		</div>

		<!-- 正文开始 -->
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-body">

					<form class="layui-form" style="max-width: 700px;margin: 40px auto;">
						<div class="layui-form-item">
							<label class="layui-form-label">内容:</label>
							<div class="layui-input-block">
								<input type="text" name="text" placeholder="请输入内容：" class="layui-input" lay-verType="tips" lay-verify="required" required/>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-filter="formSubmitBas" lay-submit>&emsp;提交&emsp;</button>
								<button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
							</div>
						</div>
					</form>
<table class="layui-table" id="tableUser" lay-filter="tableUser"></table>
				</div>
			</div>
			
		</div>

		<!-- js部分 -->
		<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
		<script type="text/javascript" src="../../assets/js/common.js?v=315"></script>
		<script>
			layui.use(['layer', 'form', 'table', 'laydate'], function() {
				var $ = layui.jquery;
				var layer = layui.layer;
				var form = layui.form;
				var laydate = layui.laydate;
				var table = layui.table;

				// 渲染表格
				var insTb = table.render({
					elem: '#tableUser',
					url: 'http://127.0.0.1:5000/data',
					height: 'full-250',
					page: true,
					toolbar: true,
					cellMinWidth: 100,
					cols: [
						[{
								type: 'numbers',
								title: '#'
							},
							{
								field: 'TYPE',
								sort: true,
								title: '类型'
							},
							{
								field: 'ROOM',
								sort: true,
								title: '房间'
							},
							{
								field: 'CONTENT',
								sort: true,
								title: '内容'
							},
							{
								field: 'DATE',
								sort: true,
								title: '评论日期'
							},
							{
								field: 'NAME',
								sort: true,
								title: '用户名'
							},
							{
								field: 'POINT',
								sort: true,
								title: '评分'
							},
							{
								field: 'SIGN',
								sort: true,
								title: '分类',
								width:200,
								templet: function(d){
									if(d.SIGN == 1){
										return '有效评论'
									}else{
										return '垃圾评论'
									}	 
      							}
							}
						]
					]
				});
				// 监听表单提交
				form.on('submit(formSubmitBas)', function(data) {
					$.ajax({
						type: 'GET',
						url: 'http://127.0.0.1:5000/query',
						data: {
							'text': data.field.text
						},
						success: function(res) {
							layer.open({
								content: res.data,
								yes: function(index, layero) {
									//do something
									layer.close(index); //如果设定了yes回调，需进行手工关闭
								}
							});
						}
					});
					return false;
				});
			});
		</script>
	</body>

</html>